<template>
  <div class="page">
    <div class="head">
      <h1>生死簿</h1>
    </div>
    <sticky>
      <div class="filter">
        <ul class="status">
          <li v-for="(item, index) in category" :class="{'active': index === active}" @click="changeCategory(item.value,item.status,index)" :key="index">{{$t(item.name)}}</li>
        </ul>
        <div class="right">
          <ul class="order">
            <li :class="{'active': item.value == params.orderBy,'up': params.sort == 0}" @click="changeOrder(item.value)" v-for="(item, index) in order" :key="index">{{$t(item.name)}}</li>
          </ul>
          <div class="btns">
            <div class="option" @click="showFilter = true"></div>
          </div>
        </div>
      </div>
    </sticky>
    <!-- 我的猴子 -->
    <div class="monkeys">
      <div class="panel" v-for="(item,index) in homeList" :key="index">
        <div class="list-item" @click="operate(item.id)">
          <div class="img">
            <img :src="item.facade" :style="{background: item.background}" alt="">
            <div class="id"># {{ item.id }}</div>
          </div>
          <ul class="minfo">
            <li>{{ item.generation }}代 · {{item.endWeight | toFix(2)}}kg <span v-if="params.status == 0">(↑{{item.weight*0.9 | toFix(2)}}kg)</span></li>
            <li>成长：{{item.grow | toFix(2)}} 生育：{{item.bear | toFix(2)}} 力量：{{item.makeMoney | toFix(2)}}</li>
          </ul>
        </div>
        <div class="buttons" v-if="params.status == 3" :class="{'active': item.id == activeId}">
          <x-button mini type="primary" class="btn" v-for="(btn,index) in recoverList" :key="index" @click.native="recoverConfirm(btn,item.weight)">↑{{item.weight*btn.ratio| toFix(1)}}kg</x-button>
        </div>
      </div>
      <infinite-loading @infinite="initData" ref="infiniteLoading">
        <span slot="no-more"></span>
        <div slot="no-results">
          <br>
          <empty></empty>
        </div>
        <spinner slot="spinner" type="lines"></spinner>
      </infinite-loading>
    </div>
    <!-- 复杂筛选 -->
    <div v-transfer-dom>
      <popup v-model="showFilter" position="right" width="300px" class="filters">
        <div class="wrap">
          <div class="block">
            <group :title="$t('代数')" class="input-range">
              <x-input v-model="params.startGen" type="number" novalidate :placeholder="$t('最低')"></x-input>
              <div class="dash"></div>
              <x-input v-model="params.endGen" type="number" novalidate :placeholder="$t('最高')"></x-input>
            </group>
            <group :title="$t('体重')" class="input-range">
              <x-input v-model="params.startWeight" type="number" novalidate :placeholder="$t('最低')"></x-input>
              <div class="dash"></div>
              <x-input v-model="params.endWeight" type="number" novalidate :placeholder="$t('最高')"></x-input>
            </group>
            <group :title="$t('力量值')" class="input-range">
              <x-input v-model="params.startMakeMoney" type="number" novalidate :placeholder="$t('最低')"></x-input>
              <div class="dash"></div>
              <x-input v-model="params.endMakeMoney" type="number" novalidate :placeholder="$t('最高')"></x-input>
            </group>
          </div>
        </div>
        <div class="button">
          <x-button type="warn" class="btn" @click.native="resetFilter">{{$t('重置')}}</x-button>
          <x-button type="primary" class="btn" @click.native="enterFilter">{{$t('确定')}}</x-button>
        </div>
      </popup>
    </div>
  </div>
</template>

<script>
  import {
    Sticky,
    Spinner,
    Popup,
      XInput,
      Group,
      XButton,
      TransferDom
  } from 'vux'
  import empty from './common/empty.vue'
  import CountDown from './common/vue2-countdown.vue'
  import InfiniteLoading from 'vue-infinite-loading';
  export default {
    directives: {
      TransferDom
    },
    components: {
      Sticky,
      empty,
      CountDown,
      InfiniteLoading,
      Spinner,
      Popup,
      XInput,
      Group,
      XButton
    },
    data() {
      return {
        order: [{
            name: '代数',
            value: '1'
          },
          {
            name: '攻击',
            value: '2'
          },
          {
            name: '体重',
            value: '3'
          }
        ],
        category: [{
            name: '我的',
            status: 0,
            value: true
          },
          {
            name: '全部',
            status: 0,
            value: false
          },
          {
            name: '恢复',
            status: 3,
            value: false
          },
        ],
        active: 0,
        recoverList: [
          {name: '10',ratio: 0.6, type: 1},
          {name: '20',ratio: 0.7, type: 2},
          {name: '30',ratio: 0.8, type: 3},
          {name: '40',ratio: 0.85, type: 4}
        ],
        params: {
          orderBy: 1,
          sort: 0,
          current: 1,
          my: true,
          status: 0,
          startGen: '',
          endGen: '',
          startMakeMoney: '',
          endMakeMoney: '',
          startWeight: '',
          endWeight: '',
        },
        homeList: [],
        activeId: null,
        showFilter: false
      }
    },
    methods: {
      initData($state) {
        this.$http
          .post(`/gameCastle/canReviveMonkeyList`, this.params)
          .then(res => {
            if (res.code == 200) {
              if (res.result.total > 0) {
                this.homeList = this.homeList.concat(res.result.records);
                $state.loaded();
                if (res.result.current < res.result.pages) {
                  this.params.current += 1;
                } else {
                  $state.complete();
                }
              } else {
                $state.complete();
              }
            } else {
              this.$vux.toast.text(res.msg)
            }
          })
          .catch(function(error) {});
      },
      resetData() {
        this.params.current = 1;
        this.homeList = []
        this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset');
      },
      resetFilter() {
        this.params.startGen = '';
        this.params.endGen = '';
        this.params.startMakeMoney = '';
        this.params.endMakeMoney = '';
        this.params.startWeight = '';
        this.params.endWeight = '';
      },
      enterFilter() {
        this.$nextTick(() => {
          this.resetData()
          this.showFilter = false
        });
      },
      changeOrder(order) {
        //点击同一个
        if (order == this.params.orderBy) {
          this.params.sort = this.params.sort == 0 ? 1 : 0;
        } else {
          this.params.orderBy = order;
          this.params.sort = 1
        }
        this.resetData()
      },
      changeCategory(my,status,index) {
        // item.value,item.status,index
        this.active = index;

        this.params.my = my;
        this.params.status = status;
        this.activeId = null
        this.resetData()
      },
      operate(id) {
        if(this.active == 2) {
          this.activeId = id
        }else {
          this.rebornMonkeyConfirm(id)
        }
        
      },
      recoverConfirm(item,weight) {
        var that = this;
        this.$vux.confirm.show({
          title: `恢复小猴`,
          content: `<p>确认消耗${item.name}棵神仙草使小猴体重恢复到${(weight*item.ratio).toFixed(2)}kg吗？</p>`,
          cancelText: '取消',
          confirmText: '恢复',
          onCancel() {
            that.$vux.toast.text('已取消')
          },
          onConfirm() {
            that.recover(item.type)
          }
        })
      },
      recover(type) {
        this.$http
          .post(`/gameCastle/supplementMonkey`,{
            monkeyId: this.activeId,
            type: type
          })
          .then(res => {
            this.$vux.toast.text(res.msg)
            if (res.code == 200) {
              this.resetData()
            } else {}
          })
          .catch(function(error) {});
      },
      rebornMonkeyConfirm(id) {
        var that = this;
        this.$vux.confirm.show({
          title: `复活小猴`,
          content: `<p>确认消耗一颗复活石复活小猴 # ${id}吗?</p>`,
          cancelText: '取消',
          confirmText: '复活',
          onCancel() {
            that.$vux.toast.text('已取消')
          },
          onConfirm() {
            that.rebornMonkey(id)
          }
        })
      },
      rebornMonkey(id) {
        this.$http
          .get(`/gameCastle/reviveMonkey?monkeyId=${id}`)
          .then(res => {
            this.$vux.toast.text(res.msg)
            if (res.code == 200) {
              this.resetData()
            } else {}
          })
          .catch(function(error) {});
      }
    },
  }
</script>

<style lang="scss" scoped>
  .filters {
    overflow: hidden;
    background: #fbf9fe;
    &::-webkit-scrollbar {
      display: none;
    }
    h1 {
      font-size: 22px;
      color: $tmdark;
    }
    .wrap {
      padding-bottom: 60px;
      height: 100%;
      overflow-y: scroll;
      padding: 12px;
    }
    .button {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      display: flex;
      .btn {
        width: 50%;
        height: 40px;
        margin: 0;
        border: 0;
        border-radius: 0;
        &:after {
          display: none;
        }
      }
    }
    .save {
      position: absolute;
      padding: 20px 12px;
      left: 0;
      bottom: 0;
      width: 100%;
    }
  }
  .filter {
    display: flex;
    justify-content: space-between;
    white-space: nowrap; // flex-wrap: wrap;
    font-size: 12px;
    background: #fff;
    height: 40px;
    line-height: 40px;
    padding: 0 12px;
    margin: 0 8px 12px;
    border-radius: 4px;
    box-shadow: 3px 3px 10px 0px rgba(158, 158, 158, 0.4);
    overflow-x: scroll;
    overflow-y: hidden;
    &::-webkit-scrollbar {
      display: none;
    }
    ul {
      display: flex;
      align-items: center;
      li {
        cursor: pointer;
      }
    }
    .status {
      color: $grey;
      li {
        transition: all .3s;
      }
      li:not(:last-child) {
        margin-right: 12px;
      }
      .active {
        color: $green;
        font-size: 14px;
        border-bottom: 2px solid $green;
      }
    }
    .right {
      display: flex;
    }
    .order {
      color: $link;
      li+li {
        margin-left: 12px;
      }
      .active:after {
        content: '';
        display: inline-block;
        vertical-align: middle;
        margin-top: -2px;
        width: 12px;
        height: 12px;
        background: url() no-repeat 50%;
        background-size: cover;
      }
      .active.up:after {
        transform: rotate(-180deg)
      }
    }
    .btns {
      display: flex;
      align-items: center;
      .option {
        width: 28px;
        height: 28px;
        margin-left: 5px;
        background: url() no-repeat 50%;
        background-size: 16px 16px;
      }
    }
  }
  .list-item {
    position: relative;
    display: flex;
    height: 80px;
    overflow: hidden;
    .img {
      width: 80px;
      height: 80px;
      font-weight: 300;
      margin-right: 10px;
      position: relative;
      flex-shrink: 0;
      font-size: 10px;
      border-radius: 4px;
      overflow: hidden;
      @media only screen and (min-width: 375px) {
        font-size: 10px;
      }
      @media only screen and (min-width: 414px) {
        font-size: 12px;
      }
      @media only screen and (min-width: 768px) {
        font-size: 14px;
      }
      .id {
        position: absolute;
        color: $grey;
        background-color: rgba(255, 255, 255, .8);
        left: 0;
        top: 6px;
        padding: 0 5px 0 0;
        border-radius: 0 100px 100px 0;
      }
      img {
        width: 100%;
      }
    }
    .minfo {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      font-size: 14px;
      color: $grey;
      white-space: nowrap;
      li:first-child {
        color: #000;
      }
    }
  }
  .buttons {
    display: flex;
    white-space: nowrap;
    align-items: center;
    justify-content: space-around;
    height: 0px;
    
    
    border-radius: 4px;
    transition: .3s;
    overflow: hidden;
    &.active {
      height: 42px;
      margin-top: 5px;
      border: 1px solid #f1f1f1;
    }
    .btn {
      font-size: 12px;
      flex-shrink: 1;
      margin: 0;
      padding: 0 10px;
    }
    
  }
</style>
